<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <tit
</head>

<body>
<div class="col-lg-12" id="datailMatchInfo">
    <ol class="breadcrumb">
        <li><i class="fa fa-home"></i>
            <a href="index.html">Home</a>
        </li>
        <li><i class=""></i>查看比赛信息</li>
    </ol>

    <div class="mcomment">
        <h3 class="page-header"><i class=""></i>查看比赛信息</h3>
        <!--比赛信息搜索-->
        <div class="row form-group">
            <div class="input-group container-fluid" style="width: 50%;">
								<span class="input-group-addon">
							<i class="fa fa-search"></i>
						</span>
                <input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索比赛"/>
                <span class="input-group-btn">
							<button @click="searchType(searchBox)" class="btn btn-default">搜索</button>
						</span>
            </div>
        </div>
        <!--比赛信息搜索结束-->

        <!--列表及操作-->
        <!--操作-->
        <div>
            <div class="row form-group">
                <div class="input-group container-fluid" style="width: 25%;">
                    <!--筛选-->
                    <!--筛选选项-->
                    <!--筛选选项-->
                    <select v-model="comId" class="form-control">
                        <option v-for="type in types" v-bind:value="type.comId">
                            {{type.laName}}
                        </option>
                    </select>
                    <span class="input-group-btn">
										<button @click="filter(name)" class="btn btn-default">筛选</button>
									</span>
                    <!--筛选结束-->
                </div>
                <!--操作结束-->
            </div>
            <!--列表-->
            <div>
                <table class="table table-bordered table-hover table-responsive">
                    <thead>
                    <tr>
                        <td>
                            <strong>比赛名称</strong>
                        </td>
                        <td>
                            <strong>报名时间</strong>
                        </td>
                        <td>
                            <strong>比赛起止时间</strong>
                        </td>
                        <td>
                            <strong>比赛状态</strong>
                        </td>
                        <td>
                            <strong>参赛方式</strong>
                        </td>
                        <td>
                            <strong>联系人</strong>
                        </td>
                        <td>
                            <strong>联系电话</strong>
                        </td>
                        <td>
                            <strong>操作</strong>
                        </td>
                    </tr>
                    </thead>
                    <tr v-for='match in matchLists'>
                        <td>{{match.title}}</td>
                        <td>{{match.enrollTime}}</td>
                        <td>{{match.startTime}}</td>
                        <td>{{match.state}}</td>
                        <td>{{match.mode}}</td>
                        <td>{{match.contacts}}</td>
                        <td>{{match.phone}}</td>
                        <td>
                            <button data-toggle="modal" data-target="#showMatch" @click="see(match.deId)"
                                    class="btn btn-success">查看
                            </button>
                            <button data-toggle="modal" data-target="#modifyMatch" @click="modify(match.deId)"
                                    class="btn btn-warning">修改
                            </button>
                            <button class="btn btn-danger" @click="deleteMatch(match.deId)">删除</button>
                        </td>
                    </tr>
                </table>
            </div>
            <!--列表结束-->

        </div>
        <!--列表及操作结束-->
        <!--分页导航-->
        <center>
            <ul class="pagination">
                <li>
                    <a @click="getajax(1)">首页</a>
                </li>
                <li>
                    <a @click="getajax(page-1)">上一页</a>
                </li>
                <li>
                <li v-for="value in showpage">
                    <a style="background: red;" @click="getajax(value)" v-if="page==value">
                        {{value}}
                    </a>

                    <a v-else @click="getajax(value)">{{value}}</a>

                </li>
                </li>
                <li>
                    <a @click="getajax(page+1)">下一页</a>
                </li>
                <li>
                    <a @click="getajax(countpage)">尾页</a>
                </li>
            </ul>
        </center>
        <!--分页导航结束-->
    </div>

    <!--查看弹出框 start-->
    <div class="modal" id="showMatch" >
        <div class="modal-dialog">
            <div class="modal-content" style="width: 900px">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>查看比賽</h4>
                </div>

                <div class="modal-body" id="detali" >
                    <table class="table table-bordered">

                        <tr>

                            <td><label for="matchInfoTitle">标题：</label></td>
                            <td><input v-model="see1.title" class="form-control " type="text" readonly="readonly"/></td>

                        </tr>

                        <tr>
                            <td><label for="matchInfoPerson">主办单位：</label></td>
                            <td><input v-model="see1.coName" class="form-control " type="text" readonly="readonly"/>
                            </td>

                        </tr>


                        <tr>

                            <td><label for="inType">参与方式：</label></td>
                            <td><input v-model="see1.mode" class="form-control " type="text" readonly="readonly"/></td>

                        </tr>

                        <tr>

                            <td><label for="matchType">比赛类型：</label></td>
                            <td><input v-model="copylaName" class="form-control " type="text" readonly="readonly"/></td>

                        </tr>

                        <tr>
                            <td><label for="matchInfoPerson">联系人：</label></td>
                            <td><input v-model="see1.contacts" class="form-control " type="text" readonly="readonly"/>
                            </td>

                        </tr>

                        <tr>
                            <td><label for="matchInfoPersonTel">联系电话：</label></td>
                            <td><input v-model="see1.phone" class="form-control " type="text" readonly="readonly"/></td>

                        </tr>

                        <tr>
                            <td><label for="matchEnrollTimes">报名时间段：</label></td>
                            <td><input v-model="see1.enrollTime" class="form-control " type="text" readonly="readonly"/>
                            </td>

                        </tr>


                        <tr>
                            <td><label for="matchTimes">比赛时间段：</label></td>
                            <td><input v-model="see1.startTime" class="form-control " type="text" readonly="readonly"/>
                            </td>

                        </tr>

                        <tr>
                            <td colspan="16">
                                <label for="noticeContent">比赛内容：</label>
                                <!--<script v-model="content1" id="Matchcontent" name="content" type="text/plain">
                                </script>-->
                                <div v-html="see1.content" class="form-control" id="noticeContent" style="width: 100%;height: 100%">

                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="16">

                                <label for="noticeContent">备注：</label>
                                <textarea disabled="disabled" class="form-control" id="noticeContent" cols="100%"
                                          rows="10">
												{{see1.note}}																				
												</textarea>

                            </td>

                        </tr>

                    </table>

                </div>

            </div>
        </div>
    </div>

    <!--查看弹出框 end-->

    <!--修改弹出框 start-->
    <div class="modal" id="modifyMatch">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 800px">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>修改比賽信息</h4>
                </div>

                <div class="modal-body" id="detali">
                    <table class=" ">

                        <tr>

                            <td><label for="matchInfoTitle">标题：</label></td>
                            <td><input v-model="modify1.title" type="text" class="form-control" id="matchInfoTitle"
                                       placeholder="请输入比赛信息标题"/></td>

                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><label for="matchInfoPerson">主办单位：</label></td>
                            <td>
                                <select v-model="modify1.coId" class="form-control">
                                    <option v-for="college in collegelist" v-bind:value="college.coId">
                                        {{college.coName}}
                                    </option>
                                </select>
                            </td>
                        </tr>

                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>

                            <td><label for="inType">参与方式：</label></td>

                            <td>
                                <select v-model="modify1.mode" class="form-control" id="inType">
                                    <option>个人</option>
                                    <option>团队</option>
                                </select>
                            </td>

                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>

                            <td><label for="matchType">比赛类型：</label></td>
                            <td>
                                <select v-model="modify1.comId" class="form-control">
                                    <option v-for="type in types" v-bind:value="type.comId">
                                        {{type.laName}}
                                    </option>
                                </select>
                            </td>

                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><label for="matchInfoPerson">联系人：</label></td>
                            <td><input v-model="modify1.contacts" type="text" class="form-control" id="matchInfoPerson"
                                       placeholder="请输入比赛联系人"/></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><label for="matchInfoPersonTel">联系电话：</label></td>
                            <td><input v-model="modify1.phone" type="tel" class="form-control" id="matchInfoPersonTel"
                                       placeholder="请输入比赛联系人电话"/></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><label for="matchEnrollTimes">报名时间段：</label></td>
                            <td><input v-model="t1" type="date" class="form-control" id="matchEnrollStartTimes"/></td>
                            <td><span>-</span></td>
                            <td><input v-model="t2" type="date" class="form-control" id="matchEnrollStopTimes"/></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>

                        <tr>
                            <td><label for="matchTimes">比赛时间段：</label></td>
                            <td><input v-model="t3" type="date" class="form-control" id="matchStartTimes"/></td>
                            <td><span>-</span></td>
                            <td><input v-model="t4" type="date" class="form-control" id="matchStopTimes"/></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="16">

                                <label for="noticeContent">比赛内容：</label>
                               <!--<textarea v-model="modify1.content" class="form-control" id="noticeContent" cols="100%"-->
                                         <!--rows="10">-->
                               <!--</textarea>-->
                                <textarea id="text1Modify"    class="form-control" style="display: none" >
											</textarea>
                                <div id="meuenModify" class="toolbar">
                                </div>
                                <div style="padding: 5px 0; color: #ccc"></div>
                                <div id="editorModify"   class="text" style="width: 100%;height: 100%;border:1px solid black"> <!--可使用 min-height 实现编辑区域自动增加高度-->

                                </div>

                            </td>

                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="16">

                                <label for="noticeContent">备注：</label>
                                <textarea v-model="modify1.note" class="form-control" id="noticeContent" cols="100%"
                                          rows="10">
						   </textarea>

                            </td>

                        </tr>

                    </table>

                </div>
                <div class="modal-footer ">
                    <button @click="modify2(modify1.deId)" class="btn btn-primary">提交</button>
                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改弹出框 end-->

</div>

<script type="text/javascript">
    var url1 = 'http://donting.free.idcfengye.com';
    //					var url1 = 'http://donting.vipgz1.idcfengye.com';
    var editor;
    var da = new Vue({
        el: '#datailMatchInfo',
        data: {
            count: '', //总记录数
            countpage: '10', //总页数
            page: '1', //当前页
            showpage: [],

            coId: '1',
            collegelist: [],

            comId: '1',
            types: [],

            mode: '',

            matchLists: [],

            searchBox: '',

            see1: {},
            delete1: {},
            modify1: {},

            t1: '',
            t2: '',
            t3: '',
            t4: '',
            copylaName: '',

        },
        methods: {
            see: function (id) {
                for (var i = 0; i < da.matchLists.length; i++) {
                    if (id == da.matchLists[i].deId) {

                        da.see1 = da.matchLists[i];

                        for (var j = 0; j < da.types.length; j++) {
                            if (da.matchLists[i].comId == da.types[j].comId) {
                                da.copylaName = da.types[j].laName;
                                console.log(da.copytype + "---laName");
                                return;
                            }
                        }

                        return;
                    }
                }
                console.log(id)
            },
            searchType: function (searchBox) {
                console.log(id)
            },

            modify: function (id) {
                for (var i = 0; i < da.matchLists.length; i++) {
                    if (id == da.matchLists[i].deId) {
                        da.modify1 = da.matchLists[i];
                        var t = da.modify1.enrollTime.split('/');
                        da.t1 = t[0];
                        da.t2 = t[1];
                        t = da.modify1.startTime.split('/');
                        da.t3 = t[0];
                        da.t4 = t[1];

                        editor.txt.html(da.modify1.content);
                        return;
                    }
                }
            },

            deleteMatch: function (id) {
                console.log(id);
                axios.defaults.withCredentials = true;
                axios.get(url1 + '/details/delete', {
                    params: {
                        'deId': id,
                    }
                }).then(function (response) {
                    var rs = response.data;
                    console.log(rs.code);
                    if (rs.code == 200) {

                        console.log("删除成功!");
                        da.getajax(1);
                    } else {
                        console.log("删除失败!");
                    }

                }).catch(function (error) {
                    console.log("连接超时！");
                });

            },

            modify2: function (id) {
                console.log(da.modify1.content);
                var x=document.getElementById("text1Modify");

                da.modify1.content=x.value;
                axios.defaults.withCredentials = true;

                axios.post(url1 + '/details/modify', {

                        'deId': da.modify1.deId,
                        'coId': da.modify1.coId, //'关联学院'
                        'title': da.modify1.title, //标题
                        'mode': da.modify1.mode, //参赛方式'

                        'enrollTime': da.t1 + '/' + da.t2, //报名时间

                        'startTime': da.t3 + '/' + da.t4, //'比赛时间',

                        'contacts': da.modify1.contacts, //'联系人',
                        'phone': da.modify1.phone, // '联系电话',
                        'content': da.modify1.content, //'比赛内容',
                        'note': da.modify1.note, //'备注',
                        'comId': da.modify1.comId,

                }).then(function (response) {
                    let rs = response.data;


                    if (rs.code == 200) {

                        alert("修改成功");
                        getajax(da.page);
                    } else {
                        alert("修改失败");
                    }

                }).catch(function (error) {
                    console.log("修改连接超时！");
                });
            },

            getajax: function (page) {
                if (page <= 0) {
                    console.log("没有上一页");
                    return;
                }
                if (page > this.countpage) {
                    console.log("没有下一页了");
                    return;
                }

                axios.defaults.withCredentials = true;

                axios.get(url1 + '/details/findAllPage', {
                    params: {
                        'page': page
                    }
                }).then(function (response) {
                    var rs = response.data

                    if(rs.code !=200) {
                        alert("无数据");
                        return;
                    }
                    da.countpage = rs.countpage;
                    da.page = rs.page;
                    da.count = rs.count;
                    da.matchLists = rs.data;
                    var cout = 0;
                    var pa = [];
                    if (rs.page <= 3) {

                        for (var i = 1; i <= da.countpage && cout < 5; i++) {
                            pa.push(i);
                            cout++;
                        }

                    } else {

                        if (rs.countpage - rs.page >= 2) {
                            pa.push(rs.page - 2);
                            pa.push(rs.page - 1);
                            pa.push(rs.page);
                            pa.push(rs.page + 1);
                            pa.push(rs.page + 2);
                        } else {
                            pa.push(rs.countpage - 4);
                            pa.push(rs.countpage - 3);
                            pa.push(rs.countpage - 2);
                            pa.push(rs.countpage - 1);
                            pa.push(rs.countpage);

                        }

                    }
                    da.showpage = pa;

                }).catch(function (error) {
                    console.log("all连接超时！");
                });

            },
            getcollege: function () {
                axios.defaults.withCredentials = true;

                axios.get(url1 + '/college/all', {}).then(function (response) {
                    var rs = response.data;
                    da.collegelist = rs.data;
                    da.coId = rs.data[0].coId;

                    if (rs.code == 200) {

                    } else {
                        console.log("查看失败!");
                    }

                }).catch(function (error) {
                    console.log("学院连接超时！" + error);
                });
            },

        },
        mounted() {
            this.getajax(1);
            GetType(this);
            this.getcollege();
            var E = window.wangEditor

            editor =new E('#meuenModify', '#editorModify');
            var $text1 = $('#text1Modify')
            editor.customConfig.withCredentials = true
            editor.customConfig.uploadFileName = 'file';
            editor.customConfig.uploadImgServer = url1+'/addEdImgUp'

            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
                console.log("更新...")
            }

            editor.create()
        }

    })
</script>
</body>

</html>